<template>
  <div class="governmentWRAP">
    <van-sticky :offset-top="0" position="top">
      <Header title="政务服务" style="background: white"/>
    </van-sticky>


    <div class="swiper-box">
      <div class="uni-margin-wrap">
        <van-swipe class="my-swipe" :autoplay="3000" lazy-render>
          <van-swipe-item v-for="image in images" :key="image">
            <van-image :src="image" class="banner" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="main-wrap">
      <van-pull-refresh
        class="van_pull_refresh"
        v-model="refreshing"
        @refresh="onRefresh"
      >
        <van-list
          v-if="list.length > 0"
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            class="box-card"
            @click="
              () => {
                handleToDetails(item);
              }
            "
            v-for="(item, index) in list"
            :key="index"
          >
            <img
              class="img-box"
              :src="`${fileUrl}/${item.mainImageId}`"

            />
            <div class="unit-nickname-wrap">
              <div class="nickname">{{ item.organizationName }}</div>
              <div class="nick-message">
                <van-text-ellipsis
                    rows="2"
                    :content="getSimpleText(item.organizationDetail)"

                />
              </div>
              <div class="addrss">地址:{{ item.organizationAddress }}</div>
            </div>
          </div>
        </van-list>

        <div v-if="list.length == 0 && !loading && !err">
          <div class="none">
            <img
              class="none_img"
              src="@/assets/images/index/none1.png"
              alt=""
            />
            <span>暂无政务信息</span>
          </div>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import governImage from '@/assets/govern.png';
import api from '@/api/index';
import { getSimpleText } from '@/utils/string-utils';
import router from '@/router/index';
import Header from '@/components/header/Header.vue';

const fileUrl = import.meta.env.VITE_FILE_URL;

const images = [governImage];
const list = ref([]);
const finished = ref(false);
const loading = ref(false);
const refreshing = ref(false);
const err = ref(false);
let pageNum = 1;
const pageSize = 10;
function onLoad() {
  loading.value = true;
  try {
    api
      .getGovernList({ pageSize, pageNum,status:0 })
      .then((resp) => {
        if (resp.code == '200') {
          list.value = [...list.value, ...resp.data.list];
          finished.value =
            resp.data.pages === '0' || resp.data.current === resp.data.pages;
          pageNum++;
        }
      })
      .finally(() => {
        loading.value = false;
        refreshing.value = false;
      });
  } catch (error) {
    err.value = true;
  }
}
function onRefresh() {
  pageNum = 1;
  list.value = [];
  refreshing.value = true;
  onLoad();
}

const handleToDetails = (item) => {
  // uni.navigateTo({
  //   url: '/mainPages/governmentDetails/index',
  // })
  router.push({
    path: '/new-governmentservices-detail',
    query: {
      id: item.id,
    },
  });
};

onLoad();
</script>
<style scoped lang="scss">
.none {
  display: flex;
  flex-direction: column;
  align-items: center;
  .none_img {
    width: 6rem;
    margin: 14.4rem 0 1rem 0;
  }
  span {
    font-size: 1.4rem;
    color: #666666;
  }
}
.governmentWRAP {
  width: 100%;
  height: 100vh;
  background-color: #eee;
  overflow: scroll;
  .banner {
    object-fit: cover;
    width: 100%;
    height: 200px;
  }
  .swiper-box {
    width: 100%;
    height: 12rem;
  }
  .uni-margin-wrap {
    width: 100%;
    width: 100%;
  }
  .swiper {
    height: 12rem;
  }
  .swiper-item {
    display: block;
    width: 100%;
    height: 30rem;
    line-height: 30rem;
    text-align: center;
  }
  .main-wrap {
    margin-top: 6rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    box-sizing: border-box;

    .box-card {
      // height: 180px;
      width: 100%;
      background: #fff;
      border-radius: 1rem;
      padding-bottom: 0.8rem;
      box-sizing: border-box;
      margin-bottom: 1rem;

      .img-box {
        border-radius: 1rem 1rem 0px 0px;
        width: 100%;
        height: 12rem;
        object-fit: cover;
      }
    }
    .unit-nickname-wrap {
      padding-left: 1rem;
      padding-right: 1rem;
      padding-top: 1rem;
      box-sizing: border-box;
      .nickname {
        // color: red;
      }
      .nick-message {
        font-size: 1.2rem;
        margin-top: 1rem;
      }
      .addrss {
        font-size: 1.2rem;
        color: #ccc;
        margin-top: 1rem;
      }
    }
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    height: 15rem;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
}
</style>
